<template>
	<view class="member-container" style="padding-bottom: 50rpx">
		<view class="top">
			<view class="container">
				<view class="userinfo">
					<image src="@/static/images/logo.png" class="avatar"></image>
					<view class="right">
						<view class="username">{{nickname}}</view>
						<view class="tel">tel : {{name}} </view>
					</view>
				</view>
				<view class="member-info">
					<view class="corner">您的身份</view>
					<view class="badge"></view>
					<view class="level">
						<view class="emphasis">{{identity.roleName}}</view>
						<view class="text" v-if="identity.time">有效期至：{{identity.time}}</view>
						<view class="text">注册区域：{{identity.registerArea}}</view>
					</view>
					<view class="total">{{identity.info}}</view>
				</view>
			</view>

			<view class="grid">
				<view class="item">
					<view class="img"></view>
					<view class="desc">自己设置佣金</view>
				</view>
				<view class="item">
					<view class="img"></view>
					<view class="desc">自定下级抽成</view>
				</view>
				<view class="item">
					<view class="img"></view>
					<view class="desc">升级可赚更多</view>
				</view>

				<view class="item">
					<view class="img"></view>
					<view class="desc">高收入秒提现</view>
				</view>
			</view>
		</view>
		<view class="describe">
			<view v-if='$auth.hasRole("group")' style="margin-bottom: 0;">
				<h4>1. 集体账户权益</h4>
				<p>
					1. 自己推广可自由定收益。
				</p>
			</view>
			<template v-else>
				<!-- <view>
					<h4>1. 区域队长权益</h4>
					<p>
						1. 可发展注册区域（县/区）内 队长，队员。
					</p>
					<p>
						2. 队长名下全部订单均可分得利润。
					</p>
					<p>
						3. 队员全部订单均可分得佣金。
					</p>
					<p>
						4. 自己推广可自由定收益。
					</p>
					<p>
						5. 享受团队优惠底价。
					</p>
				</view> -->
				<view>
					<h4>2. 团队长权益</h4>
					<p>
						1. 队员全部订单均可分得佣金。
					</p>
					<p>
						2. 自己推广可自由定收益。
					</p>
					<p>
						3. 享受团队优惠底价。
					</p>
				</view>
				<view>
					<h4>3. 队员权益</h4>
					<p>
						1. 自己推广可自由定收益。
					</p>
					<p>
						2. 享受团队优惠底价。
					</p>
				</view>
				<view>
					<h4>4. 普通用户</h4>
					<p>
						1. 自己推广可自由定收益。
					</p>
				</view>
				<h3>
					<span style="color: red;text-decoration: underline" @click="go('mine/upgrade')">点此去升级身份
					</span>/疑问可联系客服
				</h3>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		member
	} from '@/api/system/user.js'

	export default {
		data() {
			return {
				identity: {
					roleName: "",
					registerArea: "",
					info: "",
					time: ""
				}
			}
		},
		mounted() {
			member().then(res => {
				this.identity = res
				console.log(this.identity)
			})
		},
		computed: {
			nickname() {
				return this.$store.state.user.nickname
			},
			name() {
				return this.$store.state.user.name
			}
		}
	}
</script>

<style lang="scss">
	.member-container {
		height: 100vh;
		background-color: #F5F6FC;

		.top {
			width: 100%;
			background: linear-gradient(180deg, #2054CE 0%, #4245F6 27%, rgba(110, 154, 255, 0.01) 100%);
			padding: 48rpx 32rpx;
			box-sizing: border-box;

			.container {
				width: 100%;
				height: 400rpx;

				.userinfo {
					display: flex;
					height: 86rpx;
					align-items: center;

					.avatar {
						width: 80rpx;
						height: 80rpx;
					}

					.right {
						color: #fff;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;

						.username {
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
						}

						.tel {
							font-weight: 400;
							font-family: PingFang SC, PingFang SC;
							font-size: 24rpx;
							opacity: 0.6;
						}
					}
				}

				.member-info {
					height: 288rpx;
					margin-top: 42rpx;
					//border: 1px solid red;
					position: relative;
					background: url("@/static/images/memberinfo-bg.png") no-repeat left bottom;
					background-size: contain;
					padding: 2rpx 0 0 2rpx;
					box-sizing: border-box;

					.corner {
						width: 116rpx;
						height: 34rpx;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						background: linear-gradient(90deg, #ADDEFE 0%, #7790F4 100%);
						border-radius: 16rpx 0 30rpx 0;
					}

					.badge {
						position: absolute;
						width: 340rpx;
						height: 320rpx;
						background: url("@/static/images/badge.png") no-repeat 0 0;
						background-size: contain;
						left: 344rpx;
						top: -104rpx;
					}

					.level {
						font-family: PingFang SC, PingFang SC;
						color: #6F7896;
						font-weight: 400;
						font-size: 24rpx;
						margin-left: 32rpx;

						.emphasis {

							height: 100rpx;
							font-family: Source-KeynoteartHans, Source-KeynoteartHans;
							background: linear-gradient(48.921665994772695deg, #4E96D5 0%, #213E62 100%);
							font-weight: bold;
							font-size: 70rpx;
							/* 将背景裁剪到文字的区域 */
							-webkit-background-clip: text;
							/* 将文字颜色设置为透明，以显示背景 */
							color: transparent;
							transform: skewX(-20deg);
						}

						.text {
							align-self: flex-end;
						}
					}

					.total {
						margin: 30rpx 0 0 32rpx;
						color: #214B62;
						font-size: 22rpx;
						opacity: 0.6;
						color: #214B62;
					}
				}
			}

			.grid {
				margin-top: 56rpx;
				display: flex;
				justify-content: space-between;

				.item {
					.img {
						height: 92rpx;
						width: 170rpx;
						box-sizing: border-box;
						border-radius: 50%;
						background: url("@/static/images/grid-1.png") no-repeat center center / contain;
					}

					.desc {
						color: #254CC1;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						margin-top: 16rpx;
						width: 100%;
						text-align: center;
					}

					&:nth-of-type(2) .img {
						background: url("@/static/images/grid-2.png") no-repeat center center / contain;
					}

					&:nth-of-type(3) .img {
						background: url("@/static/images/grid-4.png") no-repeat center center / contain;
					}

					&:nth-of-type(4) .img {
						background: url("@/static/images/grid-3.png") no-repeat center center / contain;
					}
				}
			}
		}

		.describe {
			margin: 0 32rpx;
			border-radius: 8px;
			padding: 10px 15px;
			background-color: #fff;
			color: #6F7896;

			p {
				line-height: 30px;
				margin-left: 18px;
			}

			h3 {
				margin-top: 10px;
				text-align: center;
			}
		}
	}
</style>